<!-- 使用vueuse -->
<template>
  <p>鼠标位置：X={{ x }}，Y={{ y }}</p>
  <p>你好，{{ name }}</p>
  <button @click="toggleDark()">切换暗黑模式</button>
</template>

<script setup lang="ts">
import { useMouse, useLocalStorage, useDark, useToggle } from "@vueuse/core";
const { x, y } = useMouse();
const name = useLocalStorage("username", "张三");

const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>
